
<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="订单编码" >
                <AInput placeholder="请输入订单编码" allow-clear v-model:value="state.formData.outTradeNo"></AInput>
            </AFormItem>
            <AFormItem label="客户手机" >
                <AInput placeholder="请输入服务门店手机" allow-clear v-model:value="state.formData.mobile"></AInput>
            </AFormItem>
            <AFormItem label="员工姓名" >
                <AInput placeholder="请输入服务员工姓名" allow-clear v-model:value="state.formData.staffName"></AInput>
            </AFormItem>
            <AFormItem label="门店编码" >
                <AInput placeholder="请输入服务门店编码" allow-clear v-model:value="state.formData.storeCode"></AInput>
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false"></ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>

</template>
<script lang="ts" setup>
import {reactive,h,onMounted} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { OrderRecordTypes,CommontTypes, PageResult, ResponseVo } from "@/type"
import { OrderService } from "@/service";
       
const columns = [
    {title:"订单编号",dataIndex:"outTradeNo"},
    {title:"客户/手机",dataIndex:"mobile",customRender:({record}:{record:OrderRecordTypes.OrderRecordItem})=>{
        return h('div',{},`${record.realName}/${record.mobile}`)
    }},
    {title:"服务人员/工号",dataIndex:"staffCode",customRender:({record}:{record:OrderRecordTypes.OrderRecordItem})=>{
        return h('div',{},`${record.staffName}/${record.staffCode}`)
    }},
    {title:"商品名称",dataIndex:"goodsName"},
    {title:"套餐名称",dataIndex:"packageName"},
    {title:"销售价格",dataIndex:"salePrice"},
    {title:"购买次数",dataIndex:"count"},
    {title:"本次使用",dataIndex:"useCount"},
    {title:"剩余次数",dataIndex:"useCount",customRender:({record}:{record:OrderRecordTypes.OrderRecordItem})=>{
        return h('div',{},record.count-record.usedCount)
    }},
    {title:"结算时间",customRender:({record}:{record:OrderRecordTypes.OrderRecordItem})=>{
        return h('div',{},`${record.updator}/${record.updateTime}`)
    }},
]

const state = reactive<{
    formData: OrderRecordTypes.PageType,
    pagination:CommontTypes.IPagination,
    dataSource:OrderRecordTypes.OrderRecordItem[],
}>({
    formData:{},
    pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
    dataSource:[],
})

onMounted(()=>{
    handleSearch();
})

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<OrderRecordTypes.OrderRecordItem>>= await OrderService.orderRecordList({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}

const pageChange = (page:number,size:number)=>{
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}

const handleReset = ()=>{
    state.formData = {};
    state.pagination.pageNum=1;
    state.pagination.total=0;
    handleSearch();
}

</script>
<style lang="less" setup>

</style>